<template>
  <div>
    <el-card class="box-card !border-none" shadow="never">
        <el-page-header :content="t('title')" :icon="ArrowLeft" @back="$router.back()" />
    </el-card>
    <f-table class="mt-[15px]" ref="tableRef" @register="register">
      <template #header-left>
        <el-button type="primary" @click="handleAdd">{{ t('add') }}</el-button>
        <el-button @click="handleBatchDelete">{{ t('deleteBatch') }}</el-button>
      </template>
      <template #status="scope">
        <el-switch
          :active-value="1"
          :inactive-value="0"
          :model-value="scope.row.status"
          @click="handleStatusChange(scope.row)"
        />
      </template>

      <template #action="{ row }">
        <el-space wrap>
            <el-button type="primary" link @click="handleEdit(row)">{{ t('edit') }}</el-button>
            <el-button type="primary" link @click="handleDelete(row)">{{ t('delete') }}</el-button>
        </el-space>
      </template>
    </f-table>

    <!-- 新建/编辑弹框 -->
    <f-form-model ref="formModelRef" is="ProblemForm" @change="() => methods.reload()"></f-form-model>

  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { t } from '@/lang'
import { useRoute } from 'vue-router'
import FTable, { BasicColumn, useTable } from '@/addon/htscrm/components/f-table'
import { tableColumns, tableSearchFormItems } from '@/addon/htscrm/data/activity.video.problem'
import { batchDeleteProblemApi, deleteProblemApi, getProblemListApi, updateProblemApi } from '@/addon/htscrm/api'
import { ElMessage, ElMessageBox } from 'element-plus'
import FFormModel from '@/addon/htscrm/components/f-form-model'
import { ArrowLeft } from '@element-plus/icons-vue'

const route = useRoute()

const formModelRef = ref()
const tableRef = ref()
const { methods, register } = useTable({
    searchFromItems: tableSearchFormItems(t),
    columns: tableColumns(t) as BasicColumn<any>[],
    beforeFetch: (opt) => {
        return {
            ...opt,
            huodong_id: route.query.id
        }
    },
    api: async (opt) => (await getProblemListApi(opt)).data
})

/**
 * 新增
 */
function handleAdd () {
    formModelRef.value?.show('添加问题')
}
/**
 * 编辑
 */
function handleEdit (row: IProblemItem) {
    formModelRef.value?.show('编辑问题', row)
}

/**
 * @description 删除数据
 */
async function handleDelete (row: IProblemItem) {
    const action = await ElMessageBox.alert(t('deleteTips'), t('alert.title'), {
        type: 'warning',
        showCancelButton: true,
        cancelButtonText: t('alert.cancel'),
        confirmButtonText: t('alert.confirm')
    })
    if (action === 'confirm') {
        await deleteProblemApi(row.id)
        ElMessage.success(t('deleteSuccess'))
        methods.reload()
    }
}

/**
 * @description 状态切换
 * @param row
 */
async function handleStatusChange (row: IProblemItem) {
    const text = ['启用', '停用'][row.status || 0]
    const action = await ElMessageBox.alert(
        `确认要"${text}""${row.content}"问题吗?`,
        '系统提示',
        {
            type: 'warning',
            showCancelButton: true,
            cancelButtonText: '取消',
            confirmButtonText: '确定'
        }
    )
    if (action === 'confirm') {
        const params = {
            status: [1, 0][row.status || 0],
            id: row.id
        }
        await updateProblemApi(params)
        ElMessage.success(`${text}成功`)
        row.status = [1, 0][row.status || 0]
    }
}

/**
 * @description 批量删除
 */
async function handleBatchDelete () {
    const selection:IProblemItem[] = methods.getSelectionRows()
    if (selection.length == 0) {
        ElMessage.warning(t('deleteEmptyTips'))
        return
    }
    const ids = selection.map(item => item.id)
    const action = await ElMessageBox.alert(t('deleteBatchTips'), t('alert.title'), {
        type: 'warning',
        showCancelButton: true,
        cancelButtonText: t('alert.cancel'),
        confirmButtonText: t('alert.confirm')
    })
    if (action === 'confirm') {
        await batchDeleteProblemApi(ids)

        ElMessage.success(t('deleteSuccess'))
        // 清空选项
        methods.clearSelection()
        // 重新加载数据
        methods.reload()
    }
}
</script>

<style lang="scss" scoped>
</style>
